<template>
  <div class="color-limit-config">
    <div class="color-limit">
        <a-select v-model="limit.field" style="width: 120px">
            <a-select-option v-for="item in fields" :key="item.field" >
                {{item.alia}}
            </a-select-option>
        </a-select>
        <input type="color" v-model="limit.colorValue" />
        <span style="color: red; cursor: pointer"
            @click="deleteColorLimit(limit.uuid)"
        >
            删除
        </span>
    </div>
    <div class="color-limit">
        <a-select v-model="limit.limitType" style="width: 100px">
            <a-select-option v-for="item in limitType" :key="item.value" >
                {{item.label}}
            </a-select-option>
        </a-select>
        <a-input-number v-model="limit.limitValue" size="mini" style="margin-left: 5px;width: 120px" v-if="limit.limitType !== 'between'"/>
        <template v-if="limit.limitType === 'between'">
            <a-input-number size="mini" 
                style="margin-left: 2px;width: 60px"
                v-model="limit.front"
            ></a-input-number>
            ~
            <a-input-number size="mini" 
                style="width: 60px"
                v-model="limit.later"
            ></a-input-number>
        </template>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        limit: Object,
        fields: Array,
    },
    data(){
        return {
            limitType:[
                {label: ">", value: "greater"},
                {label: ">=", value: "greater_equal"},
                {label: "=", value: "equal"},
                {label: "<", value: "less"},
                {label: "<=", value: "less_equal"},
                {label: "...之间...", value: "between"},
            ]
        }
    },
    methods:{
      deleteColorLimit(uuid){
        this.$emit('deleteColorLimit', uuid)
      }
    }
}
</script>

<style lang="less">
.color-limit-config{
    width: 100%; 
    padding: 10px;
    border: 1px dashed #D9D9D9;

    .color-limit{
        display: flex;
        width: 100%;
        justify-content: space-between;
        // margin: 5px auto;
        align-items: center;

        input {
            color: black !important;
        }
        .ant-select-selection{
            border: 1px solid #d9d9d9 !important;
            background-color: #fff !important;
        }
    }
}
</style>